<template>
  <div class="app-container">
    <v-chart ref="chart" class="chart" :option="option" autoresize />
  </div>
</template>

<script>
import { use } from "echarts/core"
import { CanvasRenderer } from "echarts/renderers"
import { TreeChart } from "echarts/charts"
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components"
import VChart from "vue-echarts"
import { ecExport } from '@/utils'


use([
  CanvasRenderer,
  TreeChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
])

export default {
  name: "bloodRelation",
  components: {
    VChart,
  },
  props: {
    chartData: {
      type: Array,
      default: () => []
    },
    tooltipShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      
    }
  },
  computed: {
    option() {
      return {
        tooltip: {
          show: this.tooltipShow,
          trigger: "item",
          triggerOn: "mousemove",
        },
        series: [
          {
            type: "tree",
            data: this.chartData,
            initialTreeDepth: -1,
            left: "2%",
            right: "2%",
            top: "8%",
            bottom: "20%",
            symbol: "emptyRect",
            symbolSize: [30, 30],
            orient: "vertical",
            roam: true,
            expandAndCollapse: true,
            itemStyle: {
              color: '#1890ff',
              borderWidth: 1.5
            },
            label: {
              position: 'inside',
              align: "center",
              // fontSize: 8,
            },
            leaves: {
              label: {
                position: "inside",
                align: "center",
              },
            },
            animationDurationUpdate: 750,
          }
        ]
      }
    }
  },
  methods: {
    _ecExport(title = '') {
      ecExport(this.$refs.chart, title)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  height: calc(100vh - 84px);
  width: 100%;
  .chart {
    height: 100%;
    width: 100%;
  }
}
</style>